<template>
  <div>
    <!-- 内容区 -->
    <slot />
    <div ref="loadingTarget" class="h-6 py-4">
      <!-- 加载更多 -->
      <m-svg-icon
        v-show="loading"
        class="w-4 h-4 mx-auto animate-spin"
        name="infinite-load"
      ></m-svg-icon>
      <!-- 没有更多数据了 -->
      <p v-if="props.isFinished" class="text-center text-base text-zinc-400">
        已经没有更多数据了！
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onUnmounted } from 'vue'
import { useIntersectionObserver, useVModel } from '@vueuse/core'
const emits = defineEmits(['onLoad', 'update:modelValue'])

const props = defineProps({
  // 是否处于加载状态
  modelValue: {
    type: Boolean,
    required: true
  },
  //   数据是否加载完成
  isFinished: {
    type: Boolean,
    default: false
  }
})
// 处理loading的状态
const loading = useVModel(props)
// 滚动的元素
const loadingTarget = ref(null)

const tarrgetIsIntersecting = ref(false)

const timer = ref(null)

/*
处理加载事件，利用 useIntersectionObserver 监听滚动，查看当前元素是否可见
当前函数接收三个参数 target 监听的元素，callback 回调函数，options 配置项
当滚动元素可见时，与 loading 为false与 isFinished 同为false 时 出发数据加载
*/
useIntersectionObserver(loadingTarget, ([{ isIntersecting }]) => {
  tarrgetIsIntersecting.value = isIntersecting
  emitLoad()
})

// 触发加载事件
const emitLoad = () => {
  timer.value = setTimeout(() => {
    // isIntersecting 元素是否可见
    if (tarrgetIsIntersecting.value && !loading.value && !props.isFinished) {
      loading.value = true
      // 触发加载事件
      emits('onLoad')
    }
  }, 200)
}

watch(loading, (val) => {
  emitLoad()
})
onUnmounted(() => {
  clearTimeout(timer.value)
})
</script>
<style scoped lang="scss"></style>
